
      
       .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 700px;
        height: 760px;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
      }

      .flex-item {
        border: 1px solid black;
        width: 230px;
        height: 250px;
        border-radius: 15px ;

      }
      #div1{
        background-color: green;
        height: 100px;
        width:100px;
        margin: 75px auto;
        border-radius: 50%;
    }
    #div2_1{
      background-color: green;
      height: 70px;
      width:70px;
      margin: 36px auto 0 auto;
      border-radius: 50%;
    }
    #div2_2{
      background-color:black;
      height: 70px;
      width:70px;
      margin: 36px auto 0 auto;
      border-radius: 50%;
    }
    #div3_1{
      background-color: green;
      height: 50px;
      width:50px;
      margin: 25px auto 0 20px;
      border-radius: 50%;
    }
    #div3_2{
      background-color:red;
      height: 50px;
      width:50px;
      margin: 25px auto 0 90px;
      border-radius: 50%;
    }
    #div3_3{
      background-color:black;
      height: 50px;
      width:50px;
      margin: 25px 20px 25px auto;
      border-radius: 50%;
    }
    #div4_1{
      float: left;
      background-color: green;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 55px 20px 20px 45px;
    }
    #div4_2{
      background-color:black;
      height: 50px;
      width:50px;
      margin:55px 45px 20px 20px;
      border-radius: 50%;
      float: left;
    }
    #div4_3{
      background-color:black;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 20px 20px 55px 45px;
      float: left;
    }
    #div4_4{
      background-color:green;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 20px 45px 55px 20px;
      float: left;
    }
    #div5_1{
      float: left;
      background-color: green;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 55px 20px 20px 45px;
    }
    #div5_2{
      background-color:green;
      height: 50px;
      width:50px;
      margin:55px 45px 20px 20px;
      border-radius: 50%;
      float: left;
    } 
    #div5_5{
      background-color:red;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: -20px 90px -5px 90px  ;
      float: left;
    }
    #div5_3{
      background-color:black;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 0 20px 55px 45px;
      float: left;
    }
    #div5_4{
      background-color:green;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 0 45px 55px 20px;
      float: left;
    }
    #div6_1{
      float: left;
      background-color: green;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 25px 0 25px 65px;
    }
    #div6_2{
      background-color:green;
      height: 50px;
      width:50px;
      margin:25px 65px 25px 0;
      border-radius: 50%;
      float: left;
    }
    #div6_3{
      background-color:red;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 25px 0 0 65px;
      float: left;
    }
    #div6_4{
      background-color:red;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 25px 65px 0 0;
      float: left;
    }
    #div6_5{
      float: left;
      background-color: red;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 0 0 25px 65px;
    }
    #div6_6{
      background-color:red;
      height: 50px;
      width:50px;
      margin:0 0 25px 0;
      border-radius: 50%;
      float: left;
    } 
    #div7_1{
      float: left;
      background-color: green;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 25px 0 0 40px;
    }
    #div7_2{
      background-color:green;
      height: 50px;
      width:50px;
      margin:40px 0 0 0;
      border-radius: 50%;
      float: left;
    }
    #div7_3{
      background-color:green;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 55px 30px 0 0 ;
      float: left;
    }
    #div7_4{
      background-color:red;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 20px 0 0 65px;
      float: left;
    }
    #div7_5{
      float: left;
      background-color: red;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 20px 65px 0 0;
    }
    #div7_6{
      background-color:red;
      height: 50px;
      width:50px;
      margin:0 0 25px 65px;
      border-radius: 50%;
      float: left;
    } 
    #div7_7{
      background-color:red;
      height: 50px;
      width:50px;
      margin:0 65px 25px 0;
      border-radius: 50%;
      float: left;
    } 
    #div8_1{
      float: left;
      background-color: black;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 25px 0 0 65px;
    }
    #div8_2{
      background-color:black;
      height: 50px;
      width:50px;
      margin:25px 65px 0 0;
      border-radius: 50%;
      float: left;
    }
    #div8_3{
      background-color:black;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 0 0 0 65px ;
      float: left;
    }
    #div8_4{
      background-color:black;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 0 65px 0 0;
      float: left;
    }
    #div8_5{
      float: left;
      background-color: black;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 0 0 0 65px ;
    }
    #div8_6{
      background-color:black;
      height: 50px;
      width:50px;
      margin:0 65px 0 0;
      border-radius: 50%;
      float: left;
    } 
    #div8_7{
      background-color:black;
      height: 50px;
      width:50px;
      margin:0 0 25px 65px;
      border-radius: 50%;
      float: left;
    } 
    #div8_8{
      background-color:black;
      height: 50px;
      width:50px;
      margin:0 65px 25px 0;
      border-radius: 50%;
      float: left;
    } 
    #div9_1{
      float: left;
      background-color: black;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 25px 0 25px 40px;
    }
    #div9_2{
      background-color:black;
      height: 50px;
      width:50px;
      margin:25px 0 25px 0;
      border-radius: 50%;
      float: left;
    }
    #div9_3{
      background-color:black;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 25px 40px 25px 0 ;
      float: left;
    }
    #div9_4{
      background-color:red;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 0 0 25px 40px;
      float: left;
    }
    #div9_5{
      float: left;
      background-color: red;
      height: 50px;
      width:50px;
      border-radius: 50%;
      margin: 0 0 25px 0 ;
    }
    #div9_6{
      background-color:red;
      height: 50px;
      width:50px;
      margin:0 40px 25px 0;
      border-radius: 50%;
      float: left;
    } 
    #div9_7{
      background-color:green;
      height: 50px;
      width:50px;
      margin:0 0 25px 40px;
      border-radius: 50%;
      float: left;
    } 
    #div9_8{
      background-color:green;
      height: 50px;
      width:50px;
      margin:0 0 25px 0;
      border-radius: 50%;
      float: left;
    } 
    #div9_9{
      background-color:green;
      height: 50px;
      width:50px;
      margin:0 40px 25px 0;
      border-radius: 50%;
      float: left;
    } 
